<template>
	<view class="disan">
		<view class="tou flex">
			<view class="left">
				<text v-for="(item,index) in list.slice(0,3)" @tap="bianse(index)" :class="{ys:se==index}">{{item.text}}</text>
				
			</view>
			<view class="right fl" @tap="xuanzhuan">
				
				{{mc}}
				<view class="csss" :class="[state?'g':'a']">
						<text   class="iconfont icon-xiajiantou"></text>
				</view>
				<view class="mubu" v-show="state">
					<text class="wenzi" v-for="(item,index) in list.slice(3)" @tap="dian(item.text,index)" :class="{ys:se1==index}">{{item.text}}</text>
				</view>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		props:['ids'],
		data(){
			return{
				list:[
					{id:0,text:'综合'},
					{id:1,text:'最新'},
					{id:2,text:'最热'},
					{id:3,text:'全部'},
					{id:4,text:'入门'},
					{id:5,text:'提升'},
				],
				mc:'全部',
				state:false,
				se:0,
				se1:0,
				
			}
		},
		methods:{
			xuanzhuan(){
				 this.state=!this.state;
				        
			},
			dian(val,ids){
				this.mc=val
				this.se1=ids
				this.$emit("chuan",this.se,this.se1);
				
			},
			bianse(ids){
				this.se=ids
					this.$emit("chuan",this.se,this.se1);
			}
		},
		watch:{
			ids: {
			        handler(newName, oldName) {
			         this.se1=0
			         this.se=0
					 this.mc='全部'
			        },
			        immediate: true,
			        deep: true
			    }
		}
	}
</script>

<style lang="scss" scoped>
	.tou{
			font-size: 28rpx;
		.left{
			text{
			
				margin-right:10rpx ;
			}
		}
		.ys{
			color: #1c9fea;
		}
		.right{
			position: relative;
			.csss{
				width: 30rpx;
				margin-left: 10rpx;
				
				
			
			}
			.mubu{
				position: absolute;
				top: 90rpx;
				right: 10rpx;
				
				width: 234rpx;
				border-radius: 12rpx;
				background-color: #fff;
				box-shadow: 0rpx 5rpx 28rpx 0rpx #eee
				
			}
			.wenzi{
				display: block;
				text-align: center;
				line-height: 88rpx;
			}
		}
	}
</style>